<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>管理员列表</span>
		</div>
		<el-table :data="tableData">
			<!-- 按照列进行渲染 -->
			<el-table-column prop="user_id" label="#"></el-table-column>
			<el-table-column prop="username" label="用户名"></el-table-column>
			<el-table-column prop="fullname" label="姓名"></el-table-column>
			<el-table-column prop="sex" label="性别"></el-table-column>
			<el-table-column prop="tel" label="手机"></el-table-column>
			<el-table-column prop="email" label="邮箱" width="150"></el-table-column>
			<el-table-column label="头像">
				<template slot-scope="scope">
					<el-avatar shape="square" :src="scope.row.avatar"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="角色">
				<template slot-scope="scope">
					<!-- scope.row是每一行的数据 -->
					<el-tag>{{ scope.row.role_name }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.usable === 1" type="success">正常</el-tag>
					<el-tag v-if="scope.row.usable === -1" type="warning">审核中</el-tag>
					<el-tag v-if="scope.row.usable === -2" type="info">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<!-- 复杂结构的固定写法：slot-scope="scope" -->
				<template slot-scope="scope">
					<!-- 方法1 
					<router-link :to="{name:'AdminEdit',params:{user_id:scope.row.user_id}}">
						<el-button type="primary" plain icon="el-icon-edit">编辑</el-button>
					</router-link> -->

					<!-- 方法2 -->
					<!-- 更正：#前面不需要/ -->
					<el-link :underline="false" :href="`#/system/admin/edit/${scope.row.user_id}`" class="edit-link">
						<el-button v-permission="'admin:edit'" type="primary" plain icon="el-icon-edit">编辑</el-button>
					</el-link>
					<el-button v-permission="'system:admin:audit'" type="warning" plain icon="el-icon-thumb"
						:disabled="scope.row.role_id == 1" @click="handleSwitch(scope.row)">审核
					</el-button>
					<el-button v-permission="'system:admin:remove'" type="danger" plain icon="el-icon-delete"
						:disabled="scope.row.role_id == 1" @click="handleRemove(scope.row.user_id, scope.$index)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 审核弹出框 -->
		<el-dialog title="审核管理员状态" :visible.sync="dialogFormVisible" width="30%">
			<el-form :model="switch_status">
				<el-form-item label="用户状态：">
					<el-select v-model="switch_status.usable">
						<el-option label="正常" :value="1">正常</el-option>
						<el-option label="审核中" :value="-1">审核中</el-option>
						<el-option label="禁用" :value="-2">禁用 </el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleChangeStatus">确 定</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
import { Admin } from '@/api';
export default {
	data() {
		return {
			tableData: [],
			dialogFormVisible: false,
			switch_status: {
				usable: "",
				user_id: "",
			},
			current_use: "",
		}
	},
	// 在created或mounted发送ajax请求(通过调用函数)
	created() {
		document.title = "管理员列表页";
		this.loadList();
	},
	methods: {
		// 一般将发送AJAX写到methods中
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Admin.list({ pagesize: 20, pageindex: 1 });
			if (status) {
				this.tableData = data;
			} else {
				this.$message.error(msg);
			}
		},
		// 删除
		handleRemove(user_id, index) {
			this.$confirm('该操作将删除该用户, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await Admin.remove({ user_id });
					if (status) {
						// 操作DOM
						this.tableData.splice(index, 1);
						// 信息提示
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作！");
				});
		},
		// 用户审核
		handleSwitch(row) {
			this.dialogFormVisible = true;
			this.switch_status.usable = row.usable;
			this.switch_status.user_id = row.user_id;
			this.current_use = row;
		},
		// 更改用户审核状态
		async handleChangeStatus() {
			this.dialogFormVisible = false;
			let { status, msg } = await Admin.usable({ ...this.switch_status });
			if (status) {
				this.$message.success(msg);
				// 更新DOM
				this.current_use.usable = this.switch_status.usable;
			} else {
				this.$message.error(msg);
			}
		}
	},
}
</script>

<style lang="less" scoped>
.edit-link {
	margin-right: 10px;
}
</style>
